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HTML (HyperText Markup Language) 


Lenguaje de Marcado de Hipertexto 
« Componente más básico de la web 
« Documento de tipo de lenguaje de marcado 
« Compuesto de un árbol de nodos (texto, comentarios, elementos, entre 
otros) 
« No es un lenguaje de programación 


¿No es un lenguaje de programación? 


No contiene ninguna lógica de programación 

« No tiene sentencias de control 

« No puede evaluar expresiones, declarar variables, manejar eventos... 
« No puede manipular datos de ninguna manera 

« No puede tomar una entrada y obtener una salida 


Lo máximo que se puede lograr con HTML si nos vamos al límite del mismo 
es que funcione a través de los enlaces como un autómata finito 
determinístico 


Elementos de HTML 


* Hacen que su contenido se vea o actúe de cierta forma 

« Descriptos en el documento en forma de etiquetas o tags 

+ Se componen de atributos y contenido 

+ Se los puede encontrar con un comienzo y cierre o solos (llamados void) 
* Los elementos void no tienen contenido, pero pueden tener atributos 


Podemos tener una línea de texto como la siguiente 
Argentina programa 


Para hacer que esta linea se separe y destaque del resto, podemos declararla 
como un párrafo de la siguiente forma 


<p>Argentina programa</p> 


Composición de un elemento HTML 


<nombre atributo="valor" atributo2="otro">contenido</nombre> 


+ Etiqueta de apertura: Consiste en el nombre del elemento encerrado 
por “<>”. Determina donde comienza el elemento 

Etiqueta de cierre: Similar a la etiqueta de apertura pero incluye un *“/” 
antes del nombre del elemento. En ciertos casos pueden ser ignorados, 
aunque no recomendable 

Contenido: Uno o varios nodos HTML. En este caso: nodo de texto 
Atributo: Datos extra del elemento. Algunos atributos como id y class 
se pueden utilizar en cualquier elemento, mientras que otros son solo 
para ciertos elementos particulares. 

Elemento: Todos los anteriores 


Anidando elementos 


HTML permite anidar elementos colocando uno dentro del otro. Si en un 
párrafo queremos resaltar con negrita una parte del texto, podemos 
hacerlo de la siguiente manera: 


<p>Anidando elementos en <b>Argentina Programa</b> 2021</p> 


Es importante que su anidamiento sea correcto, ya que los navegadores 
fallarán silenciosamente ante errores en el documento HTML. El siguiente 
es un ejemplo de un anidamiento incorrecto 


<p>Anidando elementos en <b>Argentina Programa 2021</p></b> 


Elementos de bloque y en línea 


Bloque (block): Son elementos que forman un bloque visible en la pantalla. 
Esta rodeado de saltos de linea y suelen ser elementos estructurales como 
párrafos, listas, tablas, entre otros. 


En linea (inline): Están contenidos dentro de elementos bloque y 
normalmente cubren pequeñas partes del documento. Pueden ser 
elementos como <a> que crea un link o elementos de estilos como <b> <i> 


Ejemplo elementos de bloque y en línea 


<b>uno</b><b>dos</b><p>tres</p><p>cuatro</p> 
unodos 
tres 


cuatro 


Elementos especiales bloque y en línea 


Existen dos elementos que no tienen ninguna semántica ni acción especial. 
Y eso los hace el contenedor perfecto para cualquier cosa de forma genérica, 
aunque si es posible se deben evitar y reemplazar con elementos 
estructurales por ejemplo. 


+ <div>: Es el elemento en bloque básico 
+ <span>: Es el elemento en linea básico 


Elementos vacíos o void 


Varios elementos no tienen contenido, como por ejemplo una imagen: 
<img src="res/argentina-programa.png" alt="Arg programa"> 


Contiene dos atributos pero ninguna etiqueta de cierre </img> ni contenido. 


Solo coloca una imagen en la página de HTML donde esta ubicado el 
elemento 


Composición de un documento HTML 


<!DOCTYPE html1> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Primer página web</title> 
</head> 
<body> 
<img src="res/argentina-programa.png" alt="Arg programa"> 
</body> 
</html> 


Versiones de HTML 


HTML pasó por varias versiones y desde el 2014 se encuentra en la versión 
5, más conocida como HTML5 


Hasta la versión actual ha habido un largo camino con muchos cambios y 
pasos de una web estática, semi-dinámica, dinámica a lo que tenemos hoy 
en día 


Por ejemplo así era la etiqueta de declaración de html en la versión 4 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"https: //www.w3.org/TR/htm14/strict.dtd"> 


Comentarios 


El bloque de comentario no es un tipo de nodo de elemento HTML sino un 
nodo comentario. No puede contener otros nodos 


<!=-- Comentario --> 
<Y==> 

Multilinea 

=-> 


El texto suelto es su propio tipo de nodo, llamado nodo de texto. Al igual 
que el nodo de comentario, no puede contener otros nodos 


Nodo de texto 


Elementos manejo de texto básicos 


+ Encabezados 

. Presentación 

+ Párrafos y separaciones 
e Listas 

* Enlaces 
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Manejo de texto: Encabezados 


Hay 6 encabezados desde el h1 hasta el h6, donde el h1 es el tamaño más 
grande o destacado y el h6 es el tamaño más chico o menos destacado. 


<hi>Encabezado principal</h1> 


<h2>Sub-encabezado</h2> 
<p>Párrafo</p> 


<h3>Sub-sub-encabezado</h3> 
<p>Párrafo</p> 


Manejo de texto: Presentación 


* <b>, <strong>: Texto en negrita 
+ <i>, <em>: Texto en cursiva 

* <u> Texto subrayado 

* <s>: Texto tachado 

+ <sma11>: Texto pequeño 


Manejo de texto: Párrafos y separaciones 


« <p>: Contiene párrafos de texto 

+ <br>: Salto de linea forzado 

+ <hr>: Linea horizontal de separación 

* ¿nbsp;: espacio en blanco no separable 
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Manejo de texto: Listas 


La lista es un elemento muy útil en la enumeración de cosas 


En la web podemos encontrar de 3 tipos: no ordenada, ordenada y de 
descripción 


A continuación veremos las primeras dos 
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Manejo de texto: Listas no ordenadas 


« No tienen orden y visualmente no utilizan ningún indicador de orden 
(como 1,2,30a,b, c) 

* La etiqueta para construirlas es <u1>, donde dentro solo permite 
elementos de lista <1i> 

+ Esta enumeración esta en una lista no ordenada 
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Manejo de texto: Listas ordenadas 


1. Las listas ordenadas se pueden representar visualmente con números, 
letras, u otros que tengan un orden claro 

2. La etiqueta para construirlas es <o1>, donde dentro solo permite 
elementos de lista <1:i> 

3. Esta enumeración esta en una lista ordenada 
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Manejo de texto: Listas anidadas 


Las listas se pueden anidar unas con otras, e incluso combinar entre listas 
ordenadas y no ordenadas. Pasos para salir manejando: 


<o1> 
<li>Abrir vehículo</1li> 
<1li>Ingresar</1li> 
<ul> 
<li>Ponerse cinturón de seguridad</1li> 
<li>Prender luces y cerrar puertas</li> 
</ul> 
</1i> 
</o1> 
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Manejo de texto: Enlaces 


Los enlaces probablemente sean los elementos más importantes de HTML. 
Surgen prácticamente desde sus orígenes y van a ser los encargados de 
comunicar un documento con otro. 


La etiqueta para declararlo es <a> (anchor). El contenido es el texto del 
enlace y a través de un atributo especial llamado href(hypertext reference), 
podemos indicar el destino del mismo. 


Acceso a <a href="https://loom.wecode.io/">Loom</a> 
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Manejo de texto: Enlaces 


Podemos utilizar el mismo documento como destino del href, utilizando + 
para indicar la parte del id de la pagina. El atributo id puede pertenecer a 
cualquier elemento y es una forma única de identificación. Su nombre no se 
debe repetir en otro id 


<h1 id="page-concept">Concepto</h1> 


<a href="ttpage-concept">Ir a concepto</a> 
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Trabajo en clase 


* Editores 
« Instalación de herramientas en Eclipse 
« Creación de primer página 
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¡Muchas Gracias! 


continuará... 


